<template>
  <div class="SX-hrss-box" id="SX-hrss-box">
    <div class="titlebox">
      <div>绍兴人设</div>
      <div class="zhong" style="text-align: center;">智慧用能管理平台</div>
      <div style="text-align: right;"><span></span>{{ timedata.year }}年 {{ timedata.month }}月 {{ timedata.date }}日 {{ timedata.week }}</div>
    </div>
    <div class="bodybox">
      <div class="leftbox arr">
        <leftbox></leftbox>
      </div>
      <div class="middlebox arr">
        <MiddleBox></MiddleBox>
      </div>
      <div class="rightbox arr">
        <RightBox></RightBox>
      </div>
    </div>
    <template>
        <el-button 
        @click="isScreenFull" 
        style="background-color: #02010d; border: none;
        position: absolute; left: 20px; bottom: 25px; z-index: 9999999;"
        >全屏</el-button>
    </template>
  </div>
</template>
<script>
import RightBox from './components/RightBox.vue'
import MiddleBox from './components/middlebox.vue'
import screenfull from "screenfull";
import leftbox from './components/leftbox.vue'
import dayjs from 'dayjs';
export default {
  name: 'CallPoliceIndex',
  components:{
    leftbox,
    RightBox,
    MiddleBox,
  },
  data() {
    return {
      timedata:{}
    }
  },

  mounted() {
    this.windowResize()
    this.gettime()
  },

  methods: {
    isScreenFull() {
      if (!screenfull.isEnabled) {
        // 如果不支持进入全屏，发出不支持提示
        this.$message({
          message: "您的浏览器版本过低不支持全屏显示！",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
    windowResize() {
      //屏幕分辨率为1920*1080
      const loadFull = () => {
        let width = window.innerWidth / 1920;
        let height = window.innerHeight / 1080;
        document.querySelector('#SX-hrss-box').style.cssText = `transform:scale(${width},${height});transform-origin:left top;background-size: 100% 100%;`;
      };
      loadFull();
      window.addEventListener("resize", loadFull);
    },
    gettime() {
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const week = weekDays[dayjs().day()];
      this.timedata = {
        year: dayjs().format('YYYY'),
        month: dayjs().format('MM'),
        date: dayjs().format('DD'),
        week
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.SX-hrss-box {
  width: 1920px;
  height: 1080px;
  background-image: url('@/assets/ElectricalDistribution/SX-hrss/tucen.png');
  background-size: cover; /* 背景图覆盖整个页面 */
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 背景图不重复 */
  position: relative;
  .titlebox {
    width: 1920px;
    height: 94px;
    background-image: url('@/assets/ElectricalDistribution/SX-hrss/titleimg.png');
    background-size: cover; /* 背景图覆盖整个页面 */
    background-position: center; /* 背景图居中显示 */
    background-repeat: no-repeat; /* 背景图不重复 */
    display: flex;
    div {
      width: 33.3%;
    }
    color: #fff;
    padding: 20px ;
    // margin-bottom: 10px;
    .zhong {
      font-size: 30px;
      // padding-top: 17px;
    }
  }
  .bodybox{
    height: 986px;
    padding: 20px;
    display: flex;
    .leftbox, .rightbox{
      width: 445px;
    }
    .middlebox{
      width: 950px;
      margin: 0 20px;
    }
    .arr{
      height: 100%;
      background: rgba(28,58,109,0.1);
    }
  }
}
</style>
